<template>
	<view class="container">
		<!-- 顶部背景 -->
		<view class="bg bg-color-base"></view>

<view style="position: absolute;top: 180rpx;left: 40%;z-index: 999;">
	<image src="../../static/wxlogo.png" mode="" style="width: 160rpx;height: 160rpx;border-radius: 80rpx;"></image>
</view>
		<!-- 登录主体 -->
		<view class="main-card">
			<view class="title f60 wei">欢迎登录商家管理</view>

			<!-- 账号输入 -->
			<view class="input-group" style="display: flex;flex-direction: column;">

				<view style="display: flex;flex-direction: row;">
					<image slot="prefix" class="input-icon" src="/static/zhanghao.png" mode="aspectFit" />
					<mg-input icn="lninput" v-model="params.userName" isl="1" pr="请输入商家账号" psc="#FE9367"
						cname="custom-input">

					</mg-input>
				</view>
				<view style="display: flex;flex-direction: row;">
					<image slot="prefix" class="input-icon" src="/static/mima.png" mode="aspectFit" />
					<mg-input icn="lninput" v-model="params.passWord" isl="1" pr="请输入商家密码" psc="#FE9367" :pwd="yc"
						cname="custom-input">
					<!-- 	<text @click="yc = !yc" slot="suffix" class="iconfont"
							:class="yc ? 'iconbyj' : 'iconzyj'"></text> -->
							        <text
							          @click="yc = !yc"
							          slot="ft"
							          class="iconfont"
							          :class="yc ? 'iconbyj' : 'iconzyj'"
							        ></text>
					</mg-input>
				</view>



			</view>

			<!-- 登录按钮 -->
			<!-- #ifdef APP-PLUS -->
			<view class="f24 tip-text">备注：首次登陆需要先绑定数据域名，请联系您的商务经理!</view>
			<my-button class="login-btn" :disabled="loading" @confirm="save()">登录</my-button>
			<!-- #endif -->

			<!-- #ifdef MP-WEIXIN -->
			<my-button class="login-btn" :disabled="loading" @confirm="authorizeLogin('normalLogin')">登录</my-button>

			<view class="other-login">
				<view class="divider">
					<text class="divider-text">其他登录方式</text>
				</view>
				<view class="wx-login" @click="authorizeLogin('wxLogin')">
					<image class="wx-icon" src="/static/wxlogo.png" mode="aspectFit" />
					<text class="wx-text">微信登录</text>
				</view>
			</view>
			<!-- #endif -->
		</view>

		<!-- 域名绑定弹窗 -->
		<!-- #ifdef APP-PLUS -->
		<mg-modal :vs="true" :ismr="true" v-model="show" width="600rpx">
			<view class="modal-content">
				<mg-input ht="域名" hw="90" v-model="params.domainUrl" isl="1" pr="请输入数据域名,例:www.xxx.com" psc="#FE9367"
					cname="domain-input" />
				<view class="f24 tip-text">备注：首次登陆需要先绑定数据域名，请联系您的商务经理!</view>
				<my-button class="confirm-btn" :disabled="qrbdLoading" @confirm="qrbd">确认绑定</my-button>
			</view>
		</mg-modal>
		<!-- #endif -->
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations,
		mapActions
	} from "vuex";
	import {
		utilMixins
	} from "@/common/util-mixins.js";
	import utils from "@/common/utils.js";
	import uniNavBar from "@/components/third/uni-nav-bar.vue";
	import footc from "@/components/common/footc.vue";
	import mgI from "@/components/common/mg-icon.vue";
	import mgInput from "@/components/form/mg-input.vue";
	import mgModal from "@/components/common/modal.vue";
	export default {
		name: "order-index",
		components: {
			uniNavBar,
			footc,
			mgI,
			mgInput,
			mgModal,
		},
		data() {
			return {
				miniName: "",
				yc: true,
				loading: false,
				qrbdLoading: false,
				params: {
					userName: "",
					passWord: "",
					domainUrl: "",
				},
				second: 59,
				send: false,
				show: false,
			};
		},
		onLoad(options) {
			// this.getSystem()
			this.params.domainUrl = this.account.domainUrl || "";
			console.log("当前绑定域名:", this.params.domainUrl);
			this.getMiniConfig();
		},
		mixins: [utilMixins],
		computed: {
			bgcolor() {
				return this.fColor ? `rgba(${this.cTR(this.fColor)},0.6)` : "";
			},
		},
		methods: {
			...mapMutations(["setAccount", "setSystem"]),
			// 绑定域名弹窗
			qrbd() {
				if (utils.failValue(this.params.domainUrl)) {
					return this.util.message("请输入域名", 3);
				}
				this.util
					.request({
						url: "",
						sq: 1,
						method: "POST",
						data: {
							domain_url: this.params.domainUrl,
						},
					})
					.then((res) => {
						// console.log('确认绑定',res);
						if (res.code == 1) {
							this.setAccount({
								isDev: res.isDev,
								domainUrl: this.params.domainUrl,
							});
							this.util.burl = ""; //清空请求url前缀
							this.save();
						}
					});
			},
			//账号登录
			save() {
				let filterArr = ["domainUrl"];
				var judgeData = utils.isFailParams({
					field: this.params,
					filter: filterArr,
					tips: {
						userName: "请输入商家账号",
						passWord: "请输入商家密码",
					},
				});
				if (!judgeData) {
					return; //无值跳出   有值进入下一步
				} else {
					// 验证当前登录是否绑定域名
					if (!this.params.domainUrl) { //取反  为空
						this.show = true;
					} else {
						//不为空 往下走
						this.loading = true;
						//登录接口
						this.util
							.request({
								url: this.api.login,
								method: "POST",
								mask: 1,
								data: this.params,
							})
							.then((res) => {
								if (res.code == 1) {
									uni.$emit("getOrderConfigInfo");
									// #ifdef APP-PLUS
									// 极光绑定回调函数
									uni.$emit("setCalllBackFun");
									//#endif
									console.log("登陆成功", res);
									this.setAccount({
										isDev: res.data.isDev,
										userName: res.data.userName,
										passWord: this.params.passWord,
										domainUrl: this.params.domainUrl,
										uniacid: res.data.uniacid,
										storeId: res.data.storeId,
										userId: res.data.id,
										phone: res.data.phone,
										// 新加的
										authorizeId: res.data.authorizeId || '',
										icon: res.data.icon || '',
									});
									//-----------------------
									this.util.request({
										url: this.api.userimg,
										method: "post",
										data: {
											userName: this.userInfo.nickName,
											portrait: this.userInfo.avatarUrl,
											id: res.data.id,
										},
									});
									//-------------------------
									uni.$emit("getbusiinfo");
									this.show = false;
									this.util.message("登录成功！", 3);
									// 关闭按钮限制和页面弹窗
									this.loading = this.qrbdLoading = false;
									this.util.burl = ""; //清空请求url前缀
									this.$store.state.system.color = "";
									this.getSystem();
									//跳转主页面
									uni.reLaunch({
										url: "/yb_shd/index/index",
									});
								} else {
									this.loading = this.qrbdLoading = false;
									this.util.message(res.msg, 3);
								}
							})
							.catch((err) => {
								this.params.domainUrl = "";
								// #ifndef APP-PLUS
								this.params.domainUrl = this.account.domainUrl;
								// #endif
								console.log(err);
								this.util.message(err.msg, 3);
								this.loading = this.qrbdLoading = false;
							});
					}
				}
			},
			async getMiniConfig() {
				let {
					data
				} = await this.util.request({
					url: this.api.getMiniConfig,
					method: "get",
				});
				this.miniName = data.name;
			},
			authorizeLogin(type) {
				if (this.loading) return;
				this.loading = true;
				//初次登录需要保存账户信息
				if (!this.account.openid) {
					uni.getUserProfile({
						desc: "用于获取用户头像", // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
						success: (res) => {
							let userInfo = res.userInfo;
							//-------------------
							this.userInfo = userInfo;
							//-------------------
							if (type === "wxLogin") {
								this.getUserProfile(userInfo);
							} else if (type === "normalLogin") {
								this.getLoginInfo({
										loginType: "1"
									})
									.then((res) => {
										if (res.code == 2) {
											this.util.message(res.msg, 3);
											this.loading = false;
											return;
										}
										const account = res.data[0];
										//记录openid
										this.setAccount({
											openid: account.openid,
										});
										this.save();
									})
									.catch((e) => {
										this.loading = false;
									});
							}
						},
						fail: (e) => {
							this.loading = false;
							this.util.message("登陆失败！", 3);
						},
					});
				} else {
					if (type === "wxLogin") {
						this.getUserProfile();
					} else if (type === "normalLogin") {
						this.save();
					}
				}
			},
			async saveUser(userInfo, account) {
				await this.util.request({
					url: this.api.saveUser,
					method: "post",
					data: {
						userName: userInfo.nickName,
						portrait: userInfo.avatarUrl,
						id: account.id,
					},
				});
				this.setAccount({
					nickName: userInfo.nickName,
					portrait: userInfo.avatarUrl,
				});
			},

			//微信快捷登录
			async getUserProfile(userInfo) {
				await this.getLoginInfo({
						loginType: "2"
					})
					.then((res) => {
						//上传用户昵称和头像
						if (userInfo) {
							this.saveUser(userInfo, res);
						}
						if (res.code == 1) {
							const account = res.data[0];
							if (res.data.length > 1) {
								// 绑定多平台 TODO
								this.util.message("暂不支持绑定多个平台", 3);
								this.loading = false;
								return;
							} else if (!res.data[0].storeId) {
								this.util.message("该用户未绑定任何门店，请先联系管理员绑定", 3);
								this.loading = false;
								return;
							}
							uni.$emit("getOrderConfigInfo");
							console.log("登陆成功", res);
							this.setAccount({
								//这是门店账号ID
								userId: account.id,
								userName: account.userName,
								uniacid: account.uniacid,
								storeId: account.storeId,
								openid: account.openid,
							});
							uni.$emit("getbusiinfo");
							this.show = false;

							// uni.$emit('openLoactionUpdate');
							this.util.message("登录成功！", 3);
							// 关闭按钮限制和页面弹窗
							this.loading = false;
							this.util.burl = ""; //清空请求url前缀
							this.$store.state.system.color = "";
							this.getSystem();
							uni.switchTab({
								url: "/yb_shd/index/index",
							});
						} else {
							this.loading = false;
							this.util.message(res.msg, 3);
						}
					})
					.catch((e) => {
						this.loading = false;
					});
			},
		},
		onShareAppMessage() {
			return {
				title: this.system.name,
			};
		},
	};
</script>
<style>
	/* /deep/.weui-input {
		font-size: 36rpx;
	} */
</style>
<style lang="scss">
	.container {
		height: 100vh;
		background: #f8f8f8;

		.bg {
			height: 400rpx;
			background: #FE9367;
			border-radius: 0 0 40rpx 40rpx;
		}

		.main-card {
			position: relative;
			margin: -150rpx 40rpx 0;
			padding: 80rpx 40rpx ;
			background: #fff;
			border-radius: 20rpx;
			box-shadow: 0 10rpx 30rpx rgba(80, 100, 235, 0.1);

			.title {
				color: #333;
				margin-bottom: 80rpx;
				text-align: center;
				margin-top: 40rpx;
			}
		}

		.input-group {
			margin-bottom: 60rpx;

			.input-icon {
				width: 50rpx;
				height: 50rpx;
				margin-right: 20rpx;
				margin-top: 20rpx;
			}

			.custom-input {
				width: 520rpx;
				height: 100rpx;
				margin-bottom: 40rpx;
				padding: 0 30rpx;
				background: #fedabf3d;
				border-radius: 20rpx;

				/deep/ .uni-input-input {
					font-size: 30rpx;
					color: #FE9367;
				}

				.iconfont {
					color: #FE9367;
					font-size: 40rpx;
				}
				.iconbyj {
				  margin-right: -16rpx;
				}

			}
		}

		.login-btn {
			/deep/ .btn {
				height: 90rpx;
				background: #FE9367;
				border-radius: 40rpx;
				font-size: 34rpx;
			}
		}

		.tip-text {
			color: #999;
			margin: 30rpx 0;
			text-align: center;
		}

		.other-login {
			margin-top: 80rpx;

			.divider {
				position: relative;
				margin: 40rpx 0;
				text-align: center;

				&:before {
					content: '';
					position: absolute;
					top: 50%;
					left: 0;
					right: 0;
					height: 1rpx;
					background: #eee;
				}

				.divider-text {
					position: relative;
					padding: 0 30rpx;
					background: #fff;
					color: #999;
					font-size: 28rpx;
				}
			}

			.wx-login {
				display: flex;
				flex-direction: column;
				align-items: center;

				.wx-icon {
					width: 80rpx;
					height: 80rpx;
					margin-bottom: 20rpx;
				}

				.wx-text {
					color: #666;
					font-size: 28rpx;
				}
			}
		}

		.modal-content {
			padding: 40rpx;

			.domain-input {
				margin-bottom: 40rpx;

				/deep/ .uni-input-input {
					color: #FE9367;
				}
			}

			.confirm-btn {
				/deep/ .btn {
					background: #FE9367;
				}
			}
		}
	}
</style>